
<template>
    <div class="navbar">
        <i id='logo' class='iconfont icon-bilibili'></i>
        <div id='search'>
            <router-link to="/search">
                <i class="iconfont icon-sousuo"></i>
            </router-link>
        </div>
        <div class="userpic">
            <img src="../../assets/img/noface.jpg@48w_48h_1c.png"  alt="">
        </div>
        <div class="download">下载 App</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //userpic:require("../../assets/img/noface.jpg@48w_48h_1c.png")
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/common";
@import "../../assets/css/iconfont";

.navbar{
    display: flex;
    z-index:2;
    position: relative;
    padding:0.7rem 0.9rem 0.7rem 1.4rem;
    align-items: center;
    height: fit-content;
    background-color: #fff;
    #logo{
        font-size:2.3rem; 
        color: #fb7299;
    }
    #search{
        flex:1;
        .iconfont{
            float: right;
            color: rgb(204,204,204);
            font-size: 1.6rem;
            margin-top:0.2rem ;
        }
    }
    .userpic{
        margin: 0 1.8rem;
        height: 2rem;
        img{
            height: 2rem;
            width: 2rem;
            border-radius: 1.2rem;
        }
    }
    .download{
        background-color: #fb7299;
        color: white;
        font-size: 1.1rem;
        padding: 0.3rem 1.2rem;
        border-radius: 0.25rem;
    }
}
</style>
